import React, { createElement, Fragment } from 'react'
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'
import rehypeReact from 'rehype-react'
import Code from './Code'
import Navbar from './Navbar'
import style from './css/table.module.scss'

export default function Markdown(props) {
    const { md, nav = true, components = {}, codeConfig = {} } = props 
    return (
        <>
            <ReactMarkdown
                children={md}
                allowDangerousHtml
                skipHtml={false}
                remarkPlugins={[[gfm, { singleTilde: false }]]}
                rehypePlugins={[rehypeRaw, [rehypeReact, { createElement, Fragment }]]}
                components={{
                    p: 'div',
                    code: (...args) => Code(...args, codeConfig),
                    table({ children }) {
                        return <table className={style.table}>{children}</table>
                    },
                    // comp({ name }) { 
                    //     return <Echart></Echart>
                    // },
                    // echart:  () => <Echart />
                    ...components,
                }} />
        </>

    )
}
